---
import { BaseLayout } from '../layouts';
import {
  SITE_BASE_URL,
  DOCS_PAGE_PATH,
  STYLE_PATHS,
  VIEWPORT_NO_ZOOM,
  PAGE_TITLES,
  DOCS_DESCRIPTION,
  LOADING_TEXT
} from '../constants';
import { DocsEffects } from '../components/sections';
import { getCurrentLang } from '../utils';

const langDefault = getCurrentLang();
const langKey = langDefault.startsWith('zh') ? 'zh' : 'en';
const titleZh = PAGE_TITLES.DOCS_ZH;
const titleEn = PAGE_TITLES.DOCS_EN;
const title = langKey === 'zh' ? titleZh : titleEn;
---

<BaseLayout
  lang={langDefault}
  titleZh={titleZh}
  titleEn={titleEn}
  title={title}
  description={DOCS_DESCRIPTION}
  viewport={VIEWPORT_NO_ZOOM}
  canonical={`${SITE_BASE_URL}${DOCS_PAGE_PATH}/`}
  extraStyles={[
    STYLE_PATHS.GITHUB_CODE_HIGHLIGHT,
    STYLE_PATHS.GITHUB_MARKDOWN_LIGHT,
    STYLE_PATHS.DOCS,
    STYLE_PATHS.MARKDOWN_DARK_MODE
  ]}
  bodyClass="docs-page"
  mainClass="c-main-content c-docs-main"
  og={{
    title: PAGE_TITLES.DOCS_EN,
    description: DOCS_DESCRIPTION,
    url: `${SITE_BASE_URL}${DOCS_PAGE_PATH}/`
  }}
  metaLanguage="en, zh-CN"
>
  <div id="content-zh" class="is-lang-zh c-markdown-body">
    <div class="c-doc-loader" aria-label={LOADING_TEXT.ZH}>
      <span class="c-dot"></span>
      <span class="c-dot"></span>
      <span class="c-dot"></span>
    </div>
  </div>
  <div id="content-en" class="is-lang-en c-markdown-body">
    <div class="c-doc-loader" aria-label={LOADING_TEXT.EN}>
      <span class="c-dot"></span>
      <span class="c-dot"></span>
      <span class="c-dot"></span>
    </div>
  </div>
  <Fragment slot="bodyEnd">
    <DocsEffects client:load />
  </Fragment>
</BaseLayout>
